@import "reset";
@import "header";
@import "footer";
@import "../utils/iconfont.css";

@function getvw($wid){
    @return $wid/750*100 + vw;
}

@mixin btn {
    width: getvw(110);
    height: getvw(60);
    border-radius: getvw(15);
    background-color: #ff9344;
    // font-size: smaller;
    text-align: center;
    line-height: getvw(60);
    border: none;
    outline: none;
    color: #fff;
    a{
        color: #fff;
    }
}

.wrap>header>.header-title>.letter>i{
    font-size: getvw(50);
}

header{
    .header-showbox{
        width: 94vw;
        margin: 0 auto;
        .header-img{
            width: 100%;
            margin: getvw(25) 0 getvw(32);
        }
        .header-showbox-message{
            width: 92vw;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .header-showbox-price{
                color: #ff9344;
                font-size: getvw(72);
            }
            .btnbox{
                button{
                    @include btn;
                }
            }
        }
        .header-showbox-commend{
            @extend .header-showbox-message;
            margin-top: getvw(38);
            margin-bottom: getvw(30);
            .praise-rating{
                margin-left: getvw(15);
                i,span:last-child{
                    color: #ff9344;
                }
            }
            .more-commend{
                color: rgb(174, 174, 174);
                font-size: smaller;
            }
        }
    }
}

main{
    .store{
        width: 92vw;
        margin: 0 auto;
        .store-title{
            width: 100%;
            box-sizing: border-box;
            padding: 0.5rem;
            height: getvw(67);
            display: flex;
            background-color: #ff9344;
            color: #fff;
            justify-content: space-between;
            align-items: center;
            p{
                &:last-child{
                    font-size: getvw(47);
                }
            }
        }
        .store-item{
            display: flex;
            width: 100%;
            margin-top: getvw(10);
            .store-item-img{
                width: getvw(177);
                position: relative;
                .store-img-over{
                    position: absolute;
                    background-color: rgba(255, 255, 255,0.7);
                    width: 100%;
                    height: getvw(39);
                    left: 0;
                    top: getvw(90);
                    display: flex;
                    p{
                        margin: auto;
                    }
                }
            }
            .store-item-content{
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: getvw(176);
                width: calc(92vw - getvw(177));
                box-sizing: border-box;
                padding-left: getvw(20);
                .content-left{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    height: 100%;
                    .score{
                        i{
                            color: #ff9344;
                        }
                        span{
                            color: rgb(174, 174, 174);
                        }
                    }
                    p{
                        &:first-child{
                            font-size: 18px;
                        }
                        &:nth-of-type(2){
                            color: rgb(174, 174, 174);
                        }
                        &:last-child{
                            color: #ff9344;
                            font-size: smaller;
                            margin-top: getvw(10)
                        }
                    }
                }
                .content-right{
                    button{
                        @include btn;
                    }
                }
            }
        }
    }
}